<template>
  <div class="app-container">
    <div class="mainbox">
      <div class="button-box" v-if="videors">
        <!-- <countDownButton ref="countDown" @start="startTime" @end="endRecord" />
        <el-button
          type="primary"
          class="end-record"
          :disabled="disabledEnd"
          @click="endRecord"
        >结束录制</el-button> -->
        <el-button type="primary" @click="screenshot">截图</el-button>
      </div>

      <div class="monitor-play" @contextmenu.prevent v-loading="loading">
        <!-- <video controls autoplay muted
               ref="videoPlayer" id="videoElement" class="video-view">你的浏览器不支持 <code>video</code> 标签。</video> -->
        <video-player class="video-player vjs-custom-skin video-view" ref="videoPlayer" :options="options"
                      @error="handleError" crossOrigin="anonymous" id="videoPlayer"
                      v-show="!errorVisible"></video-player>
        <!-- <monitor-error :visible="errorVisible" :name="'监控名称'" :code="'JK0001'" /> -->
      </div>
    </div>
  </div>
</template>

<script>
// import monitorError from './components/monitorError'
import countDownButton from './components/countDownBtn'
// eslint-disable-next-line import/no-cycle
import { getVideo, qryFileIdByCode } from '@/api/monitorPlay/playView'
import { cloud } from '@/framework/utils/request'
// 引入样式
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'

const options = {
  playbackRates: [0.25, 0.5, 1.0, 1.25, 2.0], // 可选择的播放速度
  autoplay: true, // 如果true,浏览器准备好时开始回放。
  muted: true, // 默认情况下将会消除任何音频。
  loop: false, // 视频一结束就重新开始。
  // preload: 'auto',
  language: 'zh-CN',
  // aspectRatio: '16:9',
  sources: [
    {
      type: 'video/mp4',
      src: ''
    }
  ],
  notSupportedMessage: '前方视频信号中断，请稍后再试。'
}

export default {
  name: 'PlayView',
  components: { countDownButton },
  data() {
    return {
      disabledEnd: true,
      countTime: '00:00:00',
      timer: null,
      errorVisible: false,
      options: null,
      mediaRecorder: null,
      recordedBlobs: [],
      isRecording: false,
      videors: true,
      loading: false
    }
  },
  mounted() {
    if (this.$route.query.videors === '1') {
      this.videors = false
    }
    this.getPlayInfo()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getPlayInfo() {
      if (this.$route.query.fileId) {
        options.sources[0].src = `${location.origin}${process.env.VUE_APP_BASE_API}${cloud.file}/sysFileInfo/publicDownload?fileId=${this.$route.query.fileId}`
      } else {
        this.loading = true
        qryFileIdByCode(this.$route.query.videoCode).then((res) => {
          options.sources[0].src = `${location.origin}${process.env.VUE_APP_BASE_API}${cloud.file}/sysFileInfo/publicDownload?fileId=${res.data}`
          this.options = options
          this.loading = false
        }).catch(() => {
          this.errorVisible = true
          this.loading = false
        })
      }
    },
    handleError() {
      this.errorVisible = true
    },
    screenshot() {
      // 截图功能
      if (this.errorVisible) {
        return
      }
      const player = document.querySelector('#videoPlayer video') // 获取video的Dom节点
      const ele = document.createElement('a')
      const nowDate = new Date()
      const canvas = document.createElement('canvas')
      canvas.width = player.clientWidth
      canvas.height = player.clientWidth / 16 * 9
      // canvas.height = player.clientHeight
      canvas.getContext('2d').drawImage(player, 0, 0, canvas.width, canvas.height)// 截
      const dataURL = canvas.toDataURL('image/png') // 将图片转成base64格式
      const d = nowDate.getDate()
      const m = nowDate.getMonth() + 1
      const y = nowDate.getFullYear()
      const h = nowDate.getHours()
      const mm = nowDate.getMinutes()
      const s = nowDate.getSeconds()
      ele.download = `测试${y}${m}${d}${h}${mm}${s}`
      ele.style.display = 'none'
      ele.href = dataURL
      document.body.appendChild(ele)
      ele.click()
      document.body.removeChild(ele)
    },
    startTime() {
      this.disabledEnd = false
    },
    endRecord() {
      this.disabledEnd = true
      this.$refs.countDown.save()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #efefef
}
.mainbox {
  margin: 10px;
  background-color: #fff;
  box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.04),
              0px 2px 6px 0px rgba(0, 0, 0, 0.06),
              0px 0px 4px 0px rgba(0, 0, 0, 0.08);
}
.button-box {
  margin-bottom: 10px;
}
.monitor-play {
  position: relative;
  // width: 200px;
  height: calc(100vh - 97.6px);
  // background-color: pink;
  font-size: 24px;
  .video-view {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
::v-deep .end-record.is-disabled {
  color: #C0C4CC;
}
</style>
<style lang="scss">
.monitor-play {
  .video-js {
    height: 100%;
  }
}
</style>
